import * as echarts from "echarts";
// 所有用到的 echarts option 都在这里进行配置
export const chartOption = {
  // 折线图
  lineOption(data: any, dimensions: any, xAxisData: any) {
    const option = {
      grid: {
        top: "4%",
        left: "2px",
        right: "24px",
        bottom: "0px",
        containLabel: true,
      },
      legend: {
        show: false,
        top: "bottom",
        textStyle: {
          color: "#999",
        },
      },
      color: ["#1E6FFF"],
      tooltip: {
        trigger: "item",
      },
      xAxis: {
        axisTick: {
          show: false,
        },
        data: xAxisData,
        type: "category",
        boundaryGap: false,
        axisLabel: {
          show: true, // 是否显示刻度标签，默认显示
        },
      },
      yAxis: {
        type: "value",
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      series: [
        {
          name: "折线图",
          type: "line",
          // itemStyle: {
          //   borderRadius: 1,
          //   color: function (params: any) {
          //     //自定义颜色
          //     const colorList = [ "#5B8FF9","#61DDAA","#65789B","#F6BD16","#7262fd","#78D3F8"];
          //     return colorList[params.dataIndex];
          //   }
          // },
          areaStyle: {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(30, 111, 255, 0.6)",
              },
              {
                offset: 1,
                color: "rgba(1, 191, 236,0)",
              },
            ]),
          },
          encode: {
            x: dimensions[0],
            y: dimensions[1],
            tooltip: dimensions[1],
          },
        },
      ],
    };
    return option;
  },
  // 柱状图
  barOption(data: any, dimensions: any) {
    const option = {
      grid: {
        top: "4%",
        left: "2px",
        right: "0%",
        bottom: "0px",
        containLabel: true,
      },
      legend: {
        show: false,
        top: "bottom",
        textStyle: {
          color: "#999",
        },
      },
      xAxis: {
        axisTick: {
          show: false,
        },
        type: "category",
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "item",
      },
      dataset: {
        dimensions: dimensions,
        source: data,
      },
      series: [
        {
          name: "柱状图",
          type: "bar",
          itemStyle: {
            barBorderRadius: [4, 4, 4, 4],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(30, 111, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(30, 111, 255,0.8)",
              },
            ]),
          },

          encode: {
            x: dimensions[0],
            y: dimensions[1],
            tooltip: dimensions[1],
          },
        },
      ],
    };
    return option;
  },
};
